<template>
   <view class="uv-page">
      <uv-gap height="20" bgColor="#fff"></uv-gap>
      <uv-cell-group>
         <uv-cell
            @click="showModal(index)"
            :title="item.title"
            v-for="(item, index) in list"
            :key="index"
            isLink
         >
            <template v-slot:icon>
               <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
            </template>
         </uv-cell>
      </uv-cell-group>
      <view>
         <uv-modal
            ref="modal1"
            :content="content"
            title="标题"
            @confirm="confirm"
            @close="close"
         ></uv-modal>
         <uv-modal ref="modal2" :content="content" @confirm="confirm" @close="close"></uv-modal>
         <uv-modal
            ref="modal3"
            :content="content"
            showCancelButton
            @confirm="confirm"
            @cancel="cancel"
            @close="close"
         ></uv-modal>
         <uv-modal
            ref="modal4"
            :content="content"
            showCancelButton
            asyncClose
            @confirm="confirm4"
            @cancel="cancel"
            @close="close"
         ></uv-modal>
         <uv-modal
            ref="modal5"
            :content="content"
            showCancelButton
            buttonReverse
            @confirm="confirm"
            @cancel="cancel"
            @close="close"
         ></uv-modal>
         <uv-modal
            ref="modal6"
            :content="content"
            title="标题"
            :closeOnClickOverlay="false"
            @confirm="confirm"
            @close="close"
         ></uv-modal>
         <uv-modal ref="modal7" title="利剑出鞘,一统江湖" @confirm="confirm" @close="close">
            <image style="width: 80px; height: 80px" src="/static/uvui/common/logo.png"></image>
         </uv-modal>
         <uv-modal ref="modal8" title="标题" :content="content" showCancelButton @close="close">
            <template v-slot:confirmButton>
               <view style="padding: 0px 25px 15px 25px">
                  <uv-button
                     text="确定"
                     type="success"
                     shape="circle"
                     @click="confirmClickHandler"
                  ></uv-button>
               </view>
            </template>
         </uv-modal>
         <uv-modal
            ref="modal9"
            :content="content"
            title="标题"
            :zoom="false"
            @confirm="confirm"
            @close="close"
         ></uv-modal>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const modal1 = ref();
const modal2 = ref();
const modal3 = ref();
const modal4 = ref();
const modal5 = ref();
const modal6 = ref();
const modal7 = ref();
const modal8 = ref();
const modal9 = ref();

const content = ref('模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作');
const list = ref([
   {
      title: '基础使用',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/4.png',
   },
   {
      title: '无标题',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/5.png',
   },
   {
      title: '带取消按钮',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/2.png',
   },
   {
      title: '异步关闭',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/6.png',
   },
   {
      title: '对调取消和确认按钮',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/3.png',
   },
   {
      title: '禁止点击遮罩关闭',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/7.png',
   },
   {
      title: '传入slot',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/1.png',
   },
   {
      title: '自定义按钮',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/8.png',
   },
   {
      title: '淡入淡出动画',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/9.png',
   },
]);

const showModal = (index: number) => {
   switch (index) {
      case 0:
         modal1.value.open();
         break;
      case 1:
         modal2.value.open();
         break;
      case 2:
         modal3.value.open();
         break;
      case 3:
         modal4.value.open();
         break;
      case 4:
         modal5.value.open();
         break;
      case 5:
         modal6.value.open();
         break;
      case 6:
         modal7.value.open();
         break;
      case 7:
         modal8.value.open();
         break;
      case 8:
         modal9.value.open();
         break;
   }
};
const confirmClickHandler = () => {
   modal8.value.close();
};
const confirm = () => {
   console.log('confirm');
};
const close = () => {
   console.log('close');
};
const cancel = () => {
   console.log('cancel');
};
const confirm4 = () => {
   uni.$uv.sleep(2000).then(() => {
      modal4.value.closeLoading();
      modal4.value.close();
   });
};
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 0;
}
</style>
